import React, { Component } from 'react';
import { Button, Drawer, Tree, Menu, Dropdown, notification } from 'antd';
import { inject, observer } from 'mobx-react';
import '../less/index.less';
import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';

const { TreeNode } = Tree;

@inject('store')
@observer
class ModuleTreeDrawer extends Component {

  onClose = () => {
    this.props.store.closeModuleTreeDrawer();
  };

  loop = data => {
    return data.map((item) => {
      let disabled = false;
      if (item.cascade.indexOf(this.props.store.moduleTreeDrawerData.editData.cascade) > -1) {
        disabled = true;
      }
      if (item.children && item.children.length > 0) {
        return {
          key: item.id,
          title: item.name,
          disabled: disabled,
          isLeaf: item.isLeaf,
          children: this.loop(item.children),
        };
      }
      return { key: item.id, title: item.name, disabled: disabled, isLeaf: item.isLeaf };
    });
  };

  onSelect = selectedKeys => {
    this.setState({ selectedKey: selectedKeys[0] });
  };

  onSort = type => {
    if (!this.state.selectedKey) {
      notification.info({ message: '提示', description: '请选择目标节点！' });
      return;
    }
    this.props.store.sort({ destId: this.state.selectedKey, type: type });
  };

  render() {
    const { store } = this.props;
    let { editData, visible } = store.moduleTreeDrawerData;

    const menu = (
      <Menu onClick={e => this.onSort(e.key)}>
        <Menu.Item key="1"><ArrowLeftOutlined/>选中节点之前</Menu.Item>
        <Menu.Item key="2"><ArrowRightOutlined/>选中节点之后</Menu.Item>
      </Menu>
    );
    let title = '移动【' + editData.name + '】至...';
    return (
      <Drawer title={title} visible={visible} width={400} closable={false}
              bodyStyle={{ padding: '15px 15px 60px 15px' }}
              onClose={this.onClose} destroyOnClose={true}>
        <Tree treeData={this.loop(store.moduleTreeData.dataSource)} onSelect={this.onSelect} expandedKeys={store.moduleTreeDrawerData.expandedKeys}
              onExpand={expandedKeys => store.expandTree(expandedKeys)} showLine/>
        <div className='footer'>
          <Button onClick={this.onClose} style={{ marginRight: 8 }}>取消</Button>
          <Dropdown.Button overlay={menu}  onClick={() => this.onSort('0')}>选中节点下</Dropdown.Button>
        </div>
      </Drawer>);
  }
}

export default ModuleTreeDrawer;
